<template>
  <div class="home-main">
    <div class="home-content">
      <div class="content-left">
        <div class="left-top">
          <div class="top-message">
            <img class="top-head" :src="accountMessage.imger" alt="" />
            <div class="top-text">
              <span>{{ accountMessage.name }}</span>
              <span>{{ accountMessage.admin }}</span>
            </div>
          </div>
          <div class="top-tiem">
            <div class="tiem">
              <span class="name">登录时间：</span>
              <span>{{ accountMessage.loginTime }}</span>
            </div>
            <div class="tiem">
              <span class="name">登录地点：</span>
              <span>{{ accountMessage.site }}</span>
            </div>
          </div>
        </div>
        <div class="left-buttom">
          <div class="buttom-title">
            <span>进度详情</span>
          </div>
          <div class="buttom-progr">
            <div
              class="progre"
              v-for="(item, index) in customColors"
              :key="index"
            >
              <span>{{ item.name }}</span>
              <el-progress :percentage="item.percentage" :color="item.color" />
            </div>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="right-top">
          <div
            class="right-top-box"
            v-for="(item, index) in topList"
            :key="index"
          >
            <img class="box-img" :src="item.imger" alt="" />
            <div class="box-text">
              <span>{{ item.num }}</span>
              <span>{{ item.title }}</span>
            </div>
          </div>
        </div>
        <div class="right-buttom">
          <div class="right-title">
            <span>今日任务</span>
              <el-button size='mini' type="primary" @click="addition">添加</el-button>
          </div>
          <div class="taskList">
            <div class="taskLi" v-for="(item, index) in taskList" :key="index">
              <el-checkbox-group v-model="type" @change='checkboxBtn'>
                <el-checkbox :label="item.id" name="type">
                  <span>{{item.task}}</span>
                  </el-checkbox>
              </el-checkbox-group>
              <div>
                <el-button size='mini' type="primary" @click="complieBtn(item)">编辑</el-button>
                <el-button size='mini' type="danger" @click="daletBtn(item)">删除</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-echarts">
      <div class="echarts-left">
        <EchartsLine :option="option"></EchartsLine>
      </div>
      <div class="echarts-right">
        <EchartsBar :options="options"></EchartsBar>
      </div>
    </div>

    <el-dialog
    v-model="dialogVisible"
    title="添加任务"
    width="30%"
    :before-close="handleClose"
  >
    <div class="dialog">
      <span>任务名称</span>
       <el-input v-model="form.task" placeholder="请输入任务" />
    </div>
    <div class="dialog">
      <span>任务id</span>
      <el-input v-model="form.id" placeholder="请输入id" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addTask"
          >保存</el-button
        >
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script>
import EchartsLine from "@/components/echarts/EchartsLine.vue";
import EchartsBar from "@/components/echarts/EchartsBar.vue";
export default {
  components: {
    EchartsLine,
    EchartsBar,
  },
  data() {
    return {
      dialogVisible:false,
      form:{
        task:'',
        id:''
      },
      taskId:'',
      type: [],
      taskList: [
        { task: "今天写代码100行", id: 1 },
        { task: "今天写代码100", id: 2 },
        { task: "今天写代码3", id: 3 },
        { task: "今天写代码4", id: 4 },
        { task: "今天学习", id: 5 },
        { task: "今天写代码", id: 6 },
        { task: "今天写代码", id: 7 },
        { task: "今天写代码", id: 8 },
        { task: "今天写代码", id: 9 },
      ],
      //个人信息
      accountMessage: {
        name: "admin",
        admin: "超级管理员",
        imger: require("@/assets/touxiang.jpg"),
        loginTime: "2022-01-01",
        site: "贵阳",
      },
      //进度条
      customColors: [
        { name: "JavaScript", color: "#f56c6c", percentage: 20 },
        { name: "HTML", color: "#e6a23c", percentage: 40 },
        { name: "CSS", color: "#5cb87a", percentage: 60 },
        { name: "VUE", color: "#1989fa", percentage: 80 },
        { name: "ElEment-puls", color: "#6f7ad3", percentage: 60 },
      ],
      //右边头部
      topList: [
        {
          imger: require("@/assets/home/yonghu.png"),
          num: "520",
          title: "用户访问量",
        },
        {
          imger: require("@/assets/home/lingdang.png"),
          num: "20",
          title: "系统消息",
        },
        {
          imger: require("@/assets/home/gouwu.png"),
          num: "1314",
          title: "数量",
        },
      ],
      option: {},
      options: {},
    };
  },
  created() {
    this.option = {
      text: "数据统计", //标题
      legend: ["总订单", "总销售额", "搜索引擎"], //数据描述
      xAxis: ["周一", "周二", "周三", "周四", "周五"], //横坐标
      series: [
        //数据
        {
          name: "总订单",
          type: "line",
          stack: "总量",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "总销售额",
          type: "line",
          stack: "总量",
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "搜索引擎",
          type: "line",
          stack: "总量",
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
    this.options = {
      text: "数据统计", //标题
      source: [
        ["product", "2015", "2016", "2017"], //每种颜色的名称
        ["Matcha Latte", 43.3, 85.8, 93.7], //数据
        ["Milk Tea", 83.1, 73.4, 55.1], //数据
        ["Cheese Cocoa", 86.4, 65.2, 82.5], //数据
        ["Walnut Brownie", 72.4, 53.9, 39.1], //数据
      ],
    };
  },
  methods: {
    addition(){
       this.dialogVisible=true
       this.taskId=1
       this.form.task=''
      this.form.id=''
    },
    //保存任务
    addTask(){
      if(this.taskId==1){
      this.taskList.unshift(this.form)
      this.dialogVisible=false
      }else{
        this.dialogVisible=false
        alert('完成编辑了')
      }
     
    },
    //删除任务
    daletBtn(val){
      console.log(val);
    },
    complieBtn(val){
      this.dialogVisible=true
      this.taskId=2
      this.form.task=val.task
      this.form.id=val.id
    },
    checkboxBtn(value){
      console.log(value);
    },
  },
};
</script>

<style lang="less" scoped>
.home-main {
  display: flex;
  height: 100%;
  flex-direction: column;
  .home-content {
    flex: 1.5;
    display: flex;
    .content-left {
      flex: 1;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      .left-top {
        flex: 1;
        margin-bottom: 20px;
        background-color: #fff;
        padding: 6px 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        flex-direction: column;
        .top-message {
          display: flex;
          align-items: center;
          width: 100%;
          border-bottom: 1px solid #ccc;
          box-sizing: border-box;
          padding-bottom: 20px;
          .top-head {
            width: 50px;
            height: 50px;
            margin-right: 20px;
            border-radius: 50%;
          }
          .top-text {
            display: flex;
            flex-direction: column;
          }
        }
        .top-tiem {
          .tiem {
            display: flex;
            margin-top: 4px;
            font-size: 12px;
            color: #ccc;
            .name {
              margin-right: 40px;
            }
          }
        }
      }
      .left-buttom {
        flex: 1;
        background-color: #fff;
        padding: 4px 20px;
        box-sizing: border-box;
        .buttom-title {
          height: 30px;
          border-bottom: 1px solid #ccc;
          display: flex;
          align-items: center;
        }
        .buttom-progr {
          font-size: 12px;
        }
      }
    }
    .content-right {
      flex: 2;
      display: flex;
      flex-direction: column;
      .right-top {
        flex: 0 0 100px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .right-top-box {
          height: 100%;
          flex: 1;
          background-color: #fff;
          display: flex;
          align-items: center;
          &:nth-child(2){
            margin: 0 20px;
          }
          .box-img {
            width: 100px;
            height: 100px;
            margin-right: 10px;
          }
          .box-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            color: #5cb87a;
          }
        }
      }
      .right-buttom {
        flex: 1;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 20px;
        .right-title{
          display: flex;
          height: 50px;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #ccc;
        }
        .taskList{
          height: 280px;
          overflow-y:scroll; 
          .taskLi{
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }
  }
  .home-echarts {
    flex: 1;
    margin-top: 20px;
    display: flex;
    .echarts-left {
      flex: 1;
      margin-right: 20px;
      background-color: #fff;
    }
    .echarts-right {
      flex: 1;
      background-color: #fff;
    }
  }
}
.tave{
  text-decoration: line-through;
}
.dialog{
  display: flex;
  align-items: center;
  margin-top: 10px;
  span{
    width: 80px;
  }
}
</style>